<template>
  <div class="login-container">
    <h1>Login</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'
const router = useRouter()

const username = ref('');
const password = ref('');

const handleSubmit = () => {
  if (username.value && password.value) {
    console.log('Username:', username.value);
    console.log('Password:', password.value);
    const user ={
      username: username.value,
      password: password.value
    }
    console.log(user);
    axios.get("http://127.0.0.1:8080/user/login", {
      params: user
    }).then(res =>{
      console.log(res);
     if (res.data.status == 200){
      router.push({
        path: '/message',
        query:{
          username: username.value
        }
      })
     }
    })
    // 这里可以添加你的登录逻辑，例如调用API
   
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>